A React experimental_useFormStatus implementációja: Továbbfejlesztett űrlapállapot-kezelés

A React folyamatosan fejlődő világa újabb és újabb eszközöket és technikákat vezet be a fejlesztői élmény és az alkalmazások teljesítményének javítására. Egy ilyen kísérleti funkció az experimental_useFormStatus hook, amelyet az űrlapállapot-kezelés egyszerűsítésére terveztek, különösen szerverakciók és progresszív fejlesztési (progressive enhancement) forgatókönyvek esetén. Ez az átfogó útmutató részletesen bemutatja az experimental_useFormStatus hookot, gyakorlati példákkal és betekintésekkel segítve annak hatékony használatát.

Mi az az experimental_useFormStatus?

Az experimental_useFormStatus hook egy kísérleti API, amelyet a React csapata vezetett be, hogy egyszerűbb módot biztosítson egy űrlapküldés állapotának nyomon követésére, különösen szerverakciók használata esetén. E hook előtt egy űrlap különböző állapotainak (alaphelyzet, küldés, sikeres, hiba) kezelése gyakran bonyolult állapotkezelési logikát igényelt. experimental_useFormStatus célja, hogy elvonatkoztassa ezt a bonyolultságot, egyszerű és hatékony módot kínálva az űrlapküldési állapotok figyelésére és az azokra való reagálásra.

Főbb előnyök:

• Egyszerűsített állapotkezelés: Csökkenti az űrlapküldési állapotok kezeléséhez szükséges sablonkódot.
• Jobb felhasználói élmény: Lehetővé teszi a felhasználói felület reszponzívabb frissítését az űrlap állapotától függően.
• Javított kódolvashatóság: Könnyebben érthetővé és karbantarthatóvá teszi az űrlapokkal kapcsolatos kódot.
• Zökkenőmentes integráció szerverakciókkal: Kifejezetten a React Server Components és szerverakciókkal való együttműködésre tervezték.

Alapvető implementáció

Az experimental_useFormStatus alapvető implementációjának bemutatásához vegyünk egy egyszerű kapcsolatfelvételi űrlap példát. Ez az űrlap bekéri a felhasználó nevét, e-mail címét és üzenetét, majd egy szerverakció segítségével küldi el az adatokat.

Előfeltételek

Mielőtt belevágnánk a kódba, győződjön meg róla, hogy a React projektje a következőkkel van beállítva:

• Olyan React verzió, amely támogatja a kísérleti API-kat (ellenőrizze a React dokumentációjában a szükséges verziót).
• Engedélyezett React Server Components (jellemzően olyan keretrendszerekben használatos, mint a Next.js vagy a Remix).

Példa: Egy egyszerű kapcsolatfelvételi űrlap

Itt van egy alapvető kapcsolatfelvételi űrlap komponens:

```jsx // app/actions.js (Szerverakció) 'use server' export async function submitContactForm(formData) { // Adatbázis-hívás vagy API kérés szimulálása await new Promise(resolve => setTimeout(resolve, 2000)); const name = formData.get('name'); const email = formData.get('email'); const message = formData.get('message'); if (!name || !email || !message) { return { success: false, message: 'Minden mező kitöltése kötelező.' }; } try { // Cserélje le tényleges API hívásra vagy adatbázis műveletre console.log('Űrlap elküldve:', { name, email, message }); return { success: true, message: 'Az űrlap sikeresen elküldve!' }; } catch (error) { console.error('Hiba az űrlap küldésekor:', error); return { success: false, message: 'Az űrlap elküldése sikertelen.' }; } } // app/components/ContactForm.jsx (Kliens komponens) 'use client' import { experimental_useFormStatus as useFormStatus } from 'react' import { submitContactForm } from '../actions' function SubmitButton() { const { pending } = useFormStatus() return ( {pending ? 'Küldés...' : 'Küldés'} ) } export default function ContactForm() { return (

Név:

E-mail:

Üzenet: </div> <SubmitButton /> </form> ); } ``` <h3>Magyarázat</h3> <ul> <li><b>Szerverakció (<code>app/actions.js</code>):</b> Ez a fájl definiálja a <code>submitContactForm</code> függvényt, amely egy szerverakció. Egy 2 másodperces késleltetéssel szimulál egy API-kérést, hogy bemutassa az űrlapküldés aszinkron természetét. Emellett alapvető validációt és hibakezelést is végez.</li> <li><b>Kliens komponens (<code>app/components/ContactForm.jsx</code>):</b> Ez a fájl definiálja a <code>ContactForm</code> komponenst, amely egy kliens komponens. Importálja az <code>experimental_useFormStatus</code> hookot és a <code>submitContactForm</code> akciót.</li> <li><b><code>useFormStatus</code> használata:</b> A <code>SubmitButton</code> komponensben hívjuk meg a <code>useFormStatus</code>-t. Ez a hook információt szolgáltat az űrlap küldési állapotáról.</li> <li><b><code>pending</code> tulajdonság:</b> A <code>useFormStatus</code> által visszaadott <code>pending</code> tulajdonság azt jelzi, hogy az űrlap éppen küldés alatt áll-e. Ezt használjuk a küldés gomb letiltására és a „Küldés...” üzenet megjelenítésére.</li> <li><b>Űrlap összekötése:</b> A <code>form</code> elem <code>action</code> propja a <code>submitContactForm</code> szerverakcióhoz van kötve. Ez utasítja a Reactet, hogy hívja meg a szerverakciót az űrlap elküldésekor.</li> </ul> <h2>Haladó használat és megfontolások</h2> <h3>Sikeres és hibaállapotok kezelése</h3> <p>Bár az <code>experimental_useFormStatus</code> egyszerűsíti a küldési állapot nyomon követését, gyakran explicit módon kell kezelni a sikeres és hibaállapotokat. A szerverakciók visszaadhatnak olyan adatokat, amelyek sikert vagy hibát jeleznek, amelyeket aztán felhasználhat a felhasználói felület megfelelő frissítésére.</p> <p><b>Példa:</b></p> ```jsx // app/components/ContactForm.jsx (Módosítva) 'use client' import { experimental_useFormStatus as useFormStatus } from 'react' import { submitContactForm } from '../actions' import { useState } from 'react'; function SubmitButton() { const { pending } = useFormStatus() return ( <button type="submit" disabled={pending}> {pending ? 'Küldés...' : 'Küldés'} </button> ) } export default function ContactForm() { const [message, setMessage] = useState(null); async function handleSubmit(formData) { const result = await submitContactForm(formData); setMessage(result); } return ( <div> <form action={handleSubmit}> <div> <label htmlFor="name">Név:</label> <input type="text" id="name" name="name" required /> </div> <div> <label htmlFor="email">E-mail:</label> <input type="email" id="email" name="email" required /> </div> <div> <label htmlFor="message">Üzenet:</label> <textarea id="message" name="message" required /> </div> <SubmitButton /> </form> {message && ( <p className={message.success ? 'success' : 'error'}> {message.message} </p> )} </div> ); } ``` <p><b>Magyarázat:</b></p> <ul> <li><b>Állapot az üzeneteknek:</b> Bevezetünk egy <code>message</code> állapotváltozót, amely a szerverakció által visszaadott eredményt tárolja.</li> <li><b>Az eredmény kezelése:</b> Az űrlap elküldése után a <code>handleSubmit</code> függvény frissíti a <code>message</code> állapotot a szerverakció eredményével.</li> <li><b>Üzenetek megjelenítése:</b> A komponens az eredmény <code>success</code> tulajdonsága alapján jeleníti meg az üzenetet, különböző CSS osztályokat alkalmazva a sikeres és hibaállapotokra.</li> </ul> <h3>Progresszív fejlesztés</h3> <p>Az <code>experimental_useFormStatus</code> különösen jól teljesít a progresszív fejlesztési (progressive enhancement) forgatókönyvekben. Egy szabványos HTML űrlap progresszív fejlesztésével a React segítségével jobb felhasználói élményt nyújthat anélkül, hogy feláldozná az alapvető funkcionalitást, ha a JavaScript nem működik.</p> <p><b>Példa:</b></p> <p>Kezdve egy alapvető HTML űrlappal:</p> ```html <!-- public/contact.html --> <form action="/submit-contact" method="post"> <div> <label for="name">Név:</label> <input type="text" id="name" name="name" required /> </div> <div> <label for="email">E-mail:</label> <input type="email" id="email" name="email" required /> </div> <div> <label for="message">Üzenet:</label> <textarea id="message" name="message" required>

Küldés

```

Ezt követően progresszívan fejlesztheti a React és az experimental_useFormStatus segítségével.

```jsx // app/components/EnhancedContactForm.jsx 'use client' import { experimental_useFormStatus as useFormStatus } from 'react' import { submitContactForm } from '../actions' import { useState } from 'react'; import { useFormState } from 'react-dom'; function SubmitButton() { const { pending } = useFormStatus() return ( {pending ? 'Küldés...' : 'Küldés'} ) } export default function EnhancedContactForm() { const [message, setMessage] = useState(null); const [state, formAction] = useFormState(submitContactForm, null); // Használjon null-t kezdeti állapotként, ha nem támaszkodik rá return (